@use "../../securityTool/securityTool.scss" as securityTool;

%display-flex-center {
    display: flex;
    align-items: center;
}
%display-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

%svg {
    width: 16px;
    height: 16px;
    svg {
        width: 16px;
        height: 16px;
    }
}

.table-status-item {
    @extend %display-flex-center;
    gap: 4px;
    .status-text {
        color: var(--Colors-Use-Neutral-Text-1-Title);
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
    }
    .icon-success {
        @extend %svg;
        color: var(--Colors-Use-Success-Primary);
    }
    .icon-primary {
        @extend %svg;
        color: var(--Colors-Use-Main-Primary);
        animation: spin 1s infinite linear;
    }
    .icon-helper {
        @extend %svg;
        color: var(--Colors-Use-Neutral-Disable);
    }
    .icon-danger {
        @extend %svg;
        color: var(--Colors-Use-Error-Primary);
    }
    .icon-question {
        @extend %svg;
        color: var(--Colors-Use-Neutral-Disable);
        cursor: pointer;
        &:hover {
            color: var(--Colors-Use-Main-Primary);
        }
    }
}
